<template>
  <view class="container">
    <view class="top-card">
      <view class="car-info-box">
        <view class="label">{{ product.name }}
          <text class="note">8人4行李</text>
        </view>
        <view class="time-nav">
          <uni-datetime-picker
              :clear-icon="false"
              v-model="timepoint.apiobj"
              type="datetimerange"
              @change="change"
              :start="startTime"
              rangeSeparator="至"
          />
          <text>{{ timepoint.day[0] }}</text>
          <uni-icons type="right" :size="''"/>
          <text class="show-time gray-text"> {{ timepoint.time[0] }}-{{ timepoint.time[1] }}</text>
          <uni-icons type="arrow-right" :size="''"></uni-icons>
          <text>{{ timepoint.day[1] }}</text>

        </view>
      </view>
      <view class="car-info-box">
        <view class="car-info-box">
          <view class="min-text" @click="choseAddress">
            <uni-row>
              <uni-col :span="4" style="text-align: center">
                <text class="gray-text show-location">起始</text>
              </uni-col>
              <uni-col :span="20">
                <text>{{ inputvalue2[0] }}</text>
              </uni-col>
            </uni-row>
          </view>
        </view>
        <view class="car-info-box">
          <view class="min-text">
            <uni-row>
              <uni-col :span="4">
                <uni-icons type="checkmarkempty" :size="''" style="margin-left: 25rpx"></uni-icons>
              </uni-col>
              <uni-col :span="20">
                <text>行程中可根据您的需求随时停靠</text>
              </uni-col>
            </uni-row>
          </view>
        </view>
      </view>
      <view class="car-info-box">
        <view class="min-text">
          <text>包车8小时 100公里</text>
          <view class="expand-nav" @tap="$refs.billingRules.open(2)">计费规则
            <uni-icons type="right" color="" size="13"/>
          </view>
        </view>
      </view>
      <view class="line"></view>
      <view class="car-info-box">
        <view class="min-text">
          <text>无忧行｜3年内车龄｜5年以上驾龄</text>
          <view class="expand-nav" @tap="$refs.billingRules.open(0)">详情
            <uni-icons type="right" color="" size="13"/>
          </view>
        </view>
      </view>
      <view class="min-text">
        <uni-icons type="checkbox" size="13" color="#007f00" style="margin-right: 10rpx"/>
        立即确认
      </view>

    </view>
    <view class="card-info">
      <view class="label">乘车信息</view>
      <view @click="$refs.passengers.open()">
        <uni-row>
          <uni-col :span="4">
            <view style="display: flex;align-items: center;line-height: 35px">乘客</view>
          </uni-col>
          <uni-col :offset="2" :span="12">
            <view v-if="passenger.id">
              <view>{{ passenger.passengerName }}</view>
              <view>手机号 {{ passenger.passengerTel }}</view>
            </view>
            <view v-else style="color: #999;line-height: 35px">
              多人乘坐只需选择一位
            </view>
          </uni-col>
          <uni-col :offset="4" :span="2">
            <uni-icons type="contact" style="border-radius: 50%;" size="35"></uni-icons>
          </uni-col>
        </uni-row>
      </view>

    </view>
    <view class="card-info">
      <uni-list>
        <uni-list-item title="备注" :note="remark==''?'选填，填写您的特殊需求':remark" show-arrow clickable
                       @click="showRemark">

        </uni-list-item>
        <uni-list-item title="发票" note="订单完成后可在订详页申请开票" x direction="row">

          <template slot="header">
            <view style="flex: 1;
		margin-right: 10px;font-size: 14px" @click="$refs.billingRules.open(3)">发票
              <uni-icons type="help"/>
            </view>
          </template>
          <template slot="body">
            <view style="display: flex;
		flex-direction: row;font-size: 14px;
		align-items: center;">订单完成后可在订详页申请开票
            </view>
          </template>
        </uni-list-item>
      </uni-list>
    </view>
    <view class="service-explain">
      <view class="service-title">服务商</view>
      <view>由系统专车为您提供服务，查看
        <text class="popup-link">服务商资质</text>
      </view>
    </view>
    <view class="service-explain">
      <view class="service-title">用车须知</view>
      <view>请您在去支付前仔细阅读
        <text class="popup-link">《预订须知》</text>
        <text class="popup-link">《个人信息授权说明》</text>
      </view>
    </view>
    <view class="line"></view>
    <view class="body-foot">
      <view>
        <uni-row>
          <uni-col :span="8">
            <uni-icons type="auth" size="14" class="icon"/>
            专属司机
          </uni-col>
          <uni-col :span="8">
            <uni-icons type="location" size="14" class="icon"/>
            行程自由
          </uni-col>
          <uni-col :span="8">
            <!--            <text class="icon-kuaisubaojia"></text>-->
            <uni-icons custom-prefix="pricIcon" type="icon-offer" size="14" class="icon"></uni-icons>
            报价透明
          </uni-col>
        </uni-row>
        <uni-row>
          <uni-col :span="8">
            <uni-icons custom-prefix="pricIcon" type="icon-late-refund" size="14" class="icon"></uni-icons>
            迟到赔付
          </uni-col>
          <uni-col :span="8">
            <uni-icons custom-prefix="pricIcon" type="icon-refund" size="14" class="icon"></uni-icons>
            爽约退赔
          </uni-col>
          <uni-col :span="8">
            <uni-icons custom-prefix="pricIcon" type="icon-appointment" size="14" class="icon"></uni-icons>
            预定灵活
          </uni-col>
        </uni-row>
      </view>
    </view>
    <uni-popup ref="popupFeeDetails" type="bottom" background-color="reba(240, 242, 248,1)"
               border-radius="50rpx 50rpx 50rpx 50rpx" @maskClick="showPriceDetail">
      <view class="popup-details">
        <view class="popup-title">
          <view class="label">金额明细</view>
          <uni-icons type="closeempty" style="position: absolute;right: 20rpx;top: 20rpx" :size="20"
                     @click="showPriceDetail"
          ></uni-icons>
        </view>
        <view class="content">
          <view class="cost">
            <view>
              基础包车费
            </view>
            <view>
              ¥{{ zjprice }}
            </view>
          </view>
          <view class="attention">
            费用不含:停车费、路桥费等、超时长费、超公里费、附加服务费为不影响开票，如有额外费用请在订单详情页支付。停车费、高速费等请向收费方索要发票
          </view>
        </view>
      </view>
    </uni-popup>
    <view class="bottom-bar" :class="feeIsOnPage?'default-page':'on-page'">
      <view class="price" style="font-size: 24upx;">
        <view class="top">
          <view style="margin-left: 10upx;">
            ￥
            <text class="num" style="font-size: 30upx;">
              {{ zjprice }}
            </text>
          </view>
        </view>
      </view>
      <!-- <view class="tobuy flex-x-center flex-y-center" v-if="product.iszu==1" @click="tobuy">
        已被租用
      </view> -->
      <view class="mingxi"
            @tap="showPriceDetail">
        明细
      </view>
      <view class="to-buy"
            style="background: linear-gradient(90deg, #4c85f5, #074fdc);" @click="tobuy">
        立即支付
      </view>
    </view>
    <!--    <view class="quchecailiaoitem">-->
    <!--      <view class="log">-->
    <!--        <image src="/static/tabbar/my.png" mode=""></image>-->
    <!--      </view>-->
    <!--      <view class="content">-->
    <!--        <view class="tit">-->
    <!--          收费计算-->
    <!--        </view>-->
    <!--        <view class="table">-->
    <!--          <uni-table stripe emptyText="暂无更多数据" border>-->
    <!--            <uni-tr>-->
    <!--              <uni-th width="110" align="center">套餐</uni-th>-->
    <!--              <uni-th align="center">扣费标准</uni-th>-->
    <!--            </uni-tr>-->
    <!--            <uni-tr>-->
    <!--              <uni-td>停车费、路桥费、多日包车司机住宿费等</uni-td>-->
    <!--              <uni-td>停车费（仅限司机按照乘客要求停车产生的费用）、高速费、路桥费、多日包车司机住宿费（仅限司机按照乘客要求跨域过夜时产生的费用，上线350元/晚）等-->
    <!--                在套餐费用包含中未说明的费用项目，按行驶过程中司机世纪垫付的费用收取，第三方费用请向收费方索要报销凭证。-->
    <!--              </uni-td>-->
    <!--            </uni-tr>-->
    <!--            <uni-tr>-->
    <!--              <uni-td>超时长费 ¥25/半小时-->
    <!--              </uni-td>-->
    <!--              <uni-td>-->
    <!--                超出套餐所含时长后，乘客如继续用车需支付超时长费，半小时为最小计量单位，不足半小时的按半小时计费-->
    <!--              </uni-td>-->
    <!--            </uni-tr>-->
    <!--            <uni-tr>-->
    <!--              <uni-td>超公里费 ¥5/半小时-->
    <!--              </uni-td>-->
    <!--              <uni-td>超出套餐所含公里后，乘客如继续用车需支付超公里费，超出不分不足1公里按照1公里计费</uni-td>-->
    <!--            </uni-tr>-->
    <!--          </uni-table>-->
    <!--        </view>-->
    <!--      </view>-->
    <!--    </view>-->
    <inclusive-popup ref="billingRules" :product="product" :basicFee.sync="zjprice"></inclusive-popup>
    <passengers-popup ref="passengers" :passenger.sync="passenger" :userinfo="userinfo"></passengers-popup>
    <remark-popup ref="remark" :remark.sync="remark"></remark-popup>
  </view>
</template>

<script>
import {
  getordervehorderlist,
  getvehiclegoods,
  postordervehorder,
  postordervehorderadd,
  getordervehorder,
  putordervehorder,
  postordervehordersendMsg,
  putvehiclegoods
} from '../../utils/new_file.js'

import inclusivePopup from "./popup/inclusivePopup.vue";
import passengersPopup from "./popup/passengersPopup.vue"
import remarkPopup from "@/pagesA/product/popup/remarkPopup.vue";

// var util = require('@/components/WSCoordinate.js')
var app = getApp()
export default {
  components: {
    inclusivePopup,
    passengersPopup,
    remarkPopup
  },
  data() {
    return {
      pickAddress: '上海 浦东国际机场T1',
      userinfo: uni.getStorageSync('useinfo'),
      startTime: new Date().getTime(),
      remark: '',
      passenger: '',
      feeIsOnPage: true,
      toview: '',
      items: ['行前必读', '计费规则', '发票说明', '用户评价'],
      isExpandLocation: false,
      serviceType: 1,
      carId: -1,
      loading: false,
      product: [],
      business: [],
      imgurl: '',
      datetimerange: [],
      timepoint: {},//处理后的时间处理数据
      zjprice: 0,//总计金额
      zjserviceFees: 0, //总计基础服务费
      zjzxServiceFee: 0, //总计尊享服务费
      driverobj: {},//驾驶人信息
      baocheitemnum: 0, //包车天数
      // inputvalue: '',
      inputvalue2: ['请选择目的地'],//送车地址
      current: 0,

      gettype: 1, //取车方式
      checkboxfillednum: 0, //是否开启尊享服务
      // inputtype: 'text',
      // inputborder: true,
      // latitude: '',
      // longitude: '',
      // markers:[
      // 	{
      // 		latitude: '',
      // 		longitude: '',
      // 		iconPath:'../../static/imgs/bg.png'
      // 	}
      // ],

    };
  },
  onLoad: function (opt) {
    // this.opt = app.getopts(opt);
    // this.mendian_id = app.getCache('user_selected_mendianid')
    // this.getdata();
    this.carId = opt.id
    this.vehiclegoodsfun(opt.id)
    this.datetimerange = JSON.parse(opt.datetimerange)
    this.datetimerangejsfun()

    // this.onLoadHadnle();
  },
  onShow: function (e) {
    // if (this.product.product_type == 1) {
    // 	uni.$emit('getglassrecord');
    // }
    // this.$refs.billingRules.open()
    this.imgurl = app.globalData.imgUrl
    if (this.$store.state.driverobj || uni.getStorageSync('driverobj') && this.$store.state.driverobj.sfcode.length >= 15) {

    } else {

      // uni.showModal({
      //   title: '提示',
      //   content: '请添加驾驶员信息',
      //   success: function (res) {
      //     if (res.confirm) {
      //       console.log('用户点击确定');
      //       uni.navigateTo({
      //         url: '/pagesA/jiashiyuanlist/jiashiyuanlist'
      //       })
      //     } else if (res.cancel) {
      //       uni.navigateBack()
      //     }
      //   }
      // });

    }

  },
  onPullDownRefresh: function () {
    // this.getdata();
  },
  onShareAppMessage: function () {

  },
  onShareTimeline: function () {

  },
  onUnload: function () {
    // clearInterval(interval);
  },
  // created(e) {
  // 	console.log(e);
  // 	this.vehiclegoodsfun()
  // },
  methods: {
    showRemark() {
      this.$refs.remark.open()
    },
    showPriceDetail() {
      this.feeIsOnPage = !this.feeIsOnPage
      if (!this.feeIsOnPage) {
        this.$refs.popupFeeDetails.open()
      } else {
        this.$refs.popupFeeDetails.close()
      }

    },
    // 更换标签，跳转到滚动到区域
    onClickItem(e) {
      this.current = e.currentIndex
      this.toview = 'pro_' + e.currentIndex
    },
    getLocation() {
      uni.getLocation({
        type: 'gcj02',
        isHighAccuracy: true,
        success: res => {
          this.inputvalue2 = [res.address, res.latitude, res.longitude];
        }, fail: res => {
          // 提示打开权限
          this.alarmLocation()
        }
      })
    },
    change(e) {

      let start = this.formatDate(new Date(e[0]))
      let end = this.formatDate(new Date(e[1]))

      // 计算相差的毫秒数
      const difference = Math.abs(new Date(e[1]) - new Date(e[0]));
      // 将毫秒数转换为天数
      const daysDifference = Math.ceil(difference / (1000 * 60 * 60 * 24));
      this.timepoint.daysDiff = daysDifference
      console.log("-change事件daysDiff:", daysDifference);
      this.timepoint.day[0] = start.monthDay
      this.timepoint.time[0] = start.time
      // this.timepoint.apiobj[0] = start.apiobj
      this.timepoint.day[1] = end.monthDay
      this.timepoint.time[1] = end.time
      this.amountStatistics()
      // this.timepoint.apiobj[1] = end.apiobj
    },

    vehiclegoodsfun(opt) {
      getvehiclegoods(opt).then(data => {
        // console.log(data.data.data);
        this.product = data.data.data
        this.business = data.data.shops.find(item => item.id == data.data.data.sid)

        this.amountStatistics()
        console.log(this.business);
        uni.setNavigationBarTitle({
          title: this.product.name
        });
      })
    },
    choseAddress() {
      uni.chooseLocation({
        success: res => {
          console.log(res);
          this.inputvalue2 = [res.address, res.latitude, res.longitude];
        },
        fail(res) {
          this.alarmLocation()
        }
      });
    },
    alarmLocation() {
      uni.showModal({
        title: '提示',
        content: '获取地图失败，请确保是否开启手机定位与权限访问，是否打开权限访问？',
        success: (res) => {
          if (res.confirm) {
            uni.openSetting({
              success: () => {
                this.choseAddress()
              }, fail: () => {
                uni.showToast({
                  title: '获取地图权限失败',
                  icon: 'error'
                })
              }
            })
          }
        }
      })
    },
    async tobuy() {
      if (this.passenger.id == undefined) {
        uni.showToast({
          title: '请选择乘客',
          icon: 'none'
        })
        return
      } else if (this.inputvalue2.length < 2) {
        uni.showToast({
          title: '请选择上门租车地址',
          icon: 'none'
        })
      }
      // 服务消息推送
      let what = this
      if (!app.checkLogin()) { // 假设checkLogin()是你用来检查登录状态的函数
        // 获取当前页面栈
        let pages = getCurrentPages();
        // 获取当前页面
        let currentPage = pages[pages.length - 1];
        // 获取页面路径
        let pagePath = currentPage.route;
        uni.navigateTo({
          url: '/pagesA/login/login?geturl=' + pagePath
        });
      } else {
        let useinfo = uni.getStorageSync('useinfo')
        let productatatus = await getvehiclegoods(this.product.id)
        console.log(productatatus.data.data.status, '车辆情况');
        if (productatatus.data.data.status == 1 && !this.loading) {
          this.loading = true
          // obj 下单支付使用参数
          let obj = {
            openid: useinfo.openid,
            cid: this.product.id,
            money: this.product.money,
            totalMoney: this.zjprice,
            prepayMoney: this.zjprice,
            carnum: this.product.carnum,
            gettype: this.gettype,
            startTime: this.timepoint.apiobj[0],
            endTime: this.timepoint.apiobj[1],
            startShop: this.business.id,
            endShop: this.business.id,
            shopName: this.business.name,
            endShopName: this.business.name,
            day: this.timepoint.daysDiff,
            uid: useinfo.id,
            openZxService: this.checkboxfillednum,
            tel: this.passenger.passengerTel,
            username: this.passenger.passengerName,
            type: this.timepoint.day >= 70 ? 2 : 1,
            carname: this.product.name,
            pickUpAddress: this.inputvalue2 ? JSON.stringify(this.inputvalue2) : this
                .inputvalue2,
            hodmeterRemark: this.inputvalue2[0],
            serviceType: 1,
            payType: 1,
            // depositway=》是否支持面押：0免压，1不支持免压，yjgettype=》1:线上支付，2:线下支付
            depositMoney: this.product
                .deposit,
            violationDeposit: this.product.violationDeposit
          }

          let objitem = {
            id: useinfo.id,
            startShop: '',
            status: '',
            pageSize: '',
            pageNum: ''
          }
          let orderlist = await getordervehorderlist(objitem)
          console.log(orderlist.data.rows);
          let diazhifuflag = orderlist.data.rows.filter(item => item.status == 1 && this.userinfo.id ==
              item.uid)
          uni.showToast({
            title: '正在提交支付',
            icon: 'loading',
            success() {
            }
          })

          if (diazhifuflag.length > 0) {
            app.alert('当前取车时间存在未支付订单，暂时无法下单，你可以取消之前未支付的订单（确认后跳转未支付界面）', () => {
              uni.navigateTo({
                url: '/pagesB/orderdetails/orderdetails?orderId=' +
                    diazhifuflag[0].id
              })
            })
            this.loading = false
          } else {
            // 查询车辆状态，判断车辆是否空闲
            let carInfo = await getvehiclegoods(this.carId)
            if (carInfo.data.code == 200) {
              // 再次判断车辆是否被占用
              if (carInfo.data.data.status > 1) {
                app.alert("车辆已被占用，请选择其他车辆", () => {
                  uni.navigateBack()
                })
                return
              }
            } else {
              uni.showToast({
                title: "网络无法访问请求，请联系管理员",
                icon: 'error',
                duration: 2000
              })
              return
            }
            // 修改车辆状态，将车辆从空闲改为已租，防止订单并发，订单取消或结束再改为空闲
            let putobj = {
              status: 2,
              id: what.product.id,
            }
            putvehiclegoods(putobj).then(res => {
              if (res.data.code != 200) {
                uni.showToast({
                  title: '车辆占用失败，请联系管理员',
                  icon: 'error',
                  duration: 2000
                });
              }
            })
            //生产订单
            let data = await postordervehorderadd(obj)
            console.log(data);
            if (data.data.code == 200) {
              // 拿订单号查需要支付的订单
              let getdata = await getordervehorder(data.data.orderId)
              console.log(getdata);
              if (getdata.data.code == 200) {
                obj.ordernum = getdata.data.data.ordernum
                obj.id = data.data.orderId
                // 向后台拿到从微信支付返回来的支付参数
                let zhifu = await postordervehorder(obj)
                console.log(zhifu);
                if (zhifu.data.code == 200) {

                  this.loading = false

                  // 拿到后端拿回来的支付参数唤起微信支付
                  uni.requestPayment({
                    appId: zhifu.data.data.appid,
                    timeStamp: zhifu.data.data.timeStamp, // 时间戳（单位：秒）
                    nonceStr: zhifu.data.data.nonceStr, // 随机字符串
                    signType: zhifu.data.data.signType,
                    package: zhifu.data.data.package,
                    paySign: zhifu.data.data.paySign,

                    success: async function (res) {
                      console.log(res);
                      uni.showToast({
                        title: '支付成功',
                        icon: 'success',
                        success() {

                        }
                      })
                      //修改订单状态
                      let putorderobj = getdata.data.data

                      putorderobj.id = data.data.orderId
                      putorderobj.status = 2
                      putorderobj.ispay = 1
                      putorderobj.paytime = new Date()

                      putordervehorder(putorderobj)

                      //支付完成发送短信
                      let duanxinorder = getdata.data.data
                      duanxinorder.utelphone = uni.getStorageSync('useinfo')
                          .telphone
                      let postduanxin = await postordervehordersendMsg(
                          duanxinorder)
                      console.log(postduanxin);

                      uni.navigateTo({
                        url: '/pagesB/orderdetails/orderdetails?orderId=' +
                            data.data.orderId
                      })
                    },
                    fail: function (e) {
                      console.log(e);
                      uni.navigateTo({
                        url: '/pagesB/orderdetails/orderdetails?orderId=' +
                            data.data.orderId
                      })
                    }
                  })
                  this.loading = false
                }
              }

            }
          }
        } else if (productatatus.data.data.status == 2) {
          uni.showToast({
            icon: 'none',
            title: '该车辆已被预订',
            success() {
              setTimeout(function () {
                uni.switchTab({
                  url: '/pages/home/home'
                })
              }, 1000);

            }
          })
        }
        // }
      }
    },

    baochefuwu(nums) {
      this.baocheitemnum = nums
      // 解析第一个日期，因为它不会改变
      let updatedDates = [this.datetimerange[0]];

      // 获取第一个日期的时间对象
      let firstDate = new Date(this.datetimerange[0]);

      // 从第二个日期开始，更新数组中的每个日期
      for (let i = 1; i < this.datetimerange.length; i++) {
        // 创建一个新日期对象，用于修改日期
        let newDate = new Date(firstDate);
        // 将日期向前推进指定的天数
        newDate.setDate(newDate.getDate() + nums * i);
        // 将新日期转换为ISO字符串并添加到结果数组中
        updatedDates.push(newDate.toISOString());

      }
      this.datetimerange = updatedDates
      this.datetimerangejsfun()
      this.amountStatistics()

    },
    datetimerangejsfun() {
      // 定义包含两个日期的数组
      const dates = [
        new Date(this.datetimerange[0]),
        new Date(this.datetimerange[1])
      ];

      // 计算相差的毫秒数
      const difference = Math.abs(dates[1] - dates[0]);

      // 将毫秒数转换为天数
      const daysDifference = Math.ceil(difference / (1000 * 60 * 60 * 24));

      console.log(daysDifference); // 输出相差的天数


      // 定义最终的格式化时间数组
      const formattedTimestamps = [];
      const formattedDay = []

      // 遍历时间戳数组
      this.datetimerange.forEach(timestamp => {
        // 将UTC时间戳转换为本地时间（例如，亚洲/上海时区）
        const localTime = new Date(timestamp);
        //转换显示格式
        formattedTimestamps.push(this.formatDate(localTime).time);
        formattedDay.push(this.formatDate(localTime).monthDay);
      });

      // return formattedTimestamps;

      console.log(formattedTimestamps); // ['04月07日 今天 11:29:23', '04月09日 星期二 11:29:23']


      const datesapiobjs = this.datetimerange.map(date => {
        const formattedDate = new Date(date);
        const day = formattedDate.getDate();
        const month = formattedDate.getMonth() + 1;
        const hours = formattedDate.getHours();
        const minutes = formattedDate.getMinutes();
        return `${formattedDate.getFullYear()}-${month}-${day} ${hours}:${minutes < 10 ? '0' + minutes : minutes}`;
      });
      // 计算相差的毫秒数

      this.timepoint = {
        day: formattedDay,
        time: formattedTimestamps,
        apiobj: datesapiobjs,
        daysDiff: daysDifference
      }
    },
    formatDate(localTime) {
      //localTime.setHours(localTime.getHours()); // 假设上海时区为UTC+8

      // 格式化日期
      const monthDay = ("0" + (localTime.getMonth() + 1)).slice(-2) + "-" + ("0" + localTime
          .getDate()).slice(-2) + "日";

      // 获取并格式化星期
      const weekDays = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      const weekDay = weekDays[localTime.getDay()];

      // 特定情况下将星期替换为"今天"
      const today = new Date();
      const isToday = localTime.getDate() === today.getDate() && localTime.getMonth() === today
          .getMonth() && localTime.getFullYear() === today.getFullYear();
      const dayLabel = isToday ? "今天" : weekDay;

      // 提取小时和分钟
      const hours = ("0" + localTime.getHours()).slice(-2);
      const minutes = ("0" + localTime.getMinutes()).slice(-2);

      // 组合时间部分
      const time = `${hours}:${minutes}`;

      // 组合最终的格式化字符串
      //const formattedTime = `${monthDay} ${dayLabel} ${time}`;
      const formattedTime = {
        monthDay: monthDay,
        dayLabel: dayLabel,
        time: time
      };
      return formattedTime
    },
    goPassengerList() {
      uni.navigateTo({
        url: '/pagesA/passengers/index'
      })
    },
    // addressfun(text) {
    // 	let startIndex = text.indexOf("区") + 1;
    // 	return text.slice(startIndex);
    // },
    swiperChange: function (e) {
      var that = this;
      that.current = e.detail.current
    },
    amountStatistics() {
      // let peisongfei = this.gettype == 2 ? Number(this.product
      // 	.sendServiceFee) + Number(this.product
      // 	.pickServiceFee) : 0


      // depositway=》是否支持面押：0免压，1不支持免压，yjgettype=》1:线上支付，2:线下支付
      //this.product.violationDeposit

      this.zjprice = (this.product.money *
          this.timepoint.daysDiff).toFixed(2)

      return this.zjprice
    },
    checkboxfilledfun() {
      // let peisongfei = this.gettype == 2 ? Number(this.product.sendServiceFee) + Number(this.product
      // 	.pickServiceFee) : 0
      this.checkboxfillednum = this.checkboxfillednum == 0 ? 1 : 0
      this.amountStatistics()
    },
    // previewImagefun(index, imglist) {
    // 	getApp().previewImage(index, imglist)
    // },
    flitertext(idNumber, x, y) {
      if (idNumber) {
        const idArray = idNumber.split('');

        // 遍历需要隐藏的范围，将其中的数字替换为 *
        for (let i = x; i < idArray.length - y; i++) {
          idArray[i] = '*';
        }
        console.log(idArray);
        // 将数组重新拼接成字符串，并返回
        return idArray.join('');
      }
    },

  }

};
</script>
<style lang="scss">
body {
  width: 100%;
  //height: 100%;
}

.container {
  //height: 100%;
  background: #f0f2f8;
}

.top-card {
  background: #FFFFFF;
  box-shadow: 0 4rpx 5px 5rpx rgba(229, 231, 234, 0.5);
  padding: 20rpx 60rpx;

  .car-info-box {
    display: block;
    margin: 20rpx 0;
    font-size: 30rpx;
    align-items: center;

    .expand-nav {
      display: inline-block;
      float: right;
      font-size: 25rpx;
      color: #4f5254;

      image {
        vertical-align: top;
        width: 30rpx;
        height: 35rpx;
        transform: rotate(90deg)
      }
    }

    .gray-text {
      background: #e0e0e0;
      padding: 5rpx 15rpx;
      font-size: 25rpx;
      color: #404040;
    }

    .show-time {
      border-radius: 50px;
    }

    .show-location {
      border-radius: 10rpx;
    }

    .time-nav {
      font-weight: bold;
      font-size: 25rpx;
      display: inline-block;
      text-align: left;
      position: relative;

    }
  }
}

.label {
  font-size: 35rpx;
  padding: 20rpx 0 25rpx;
}

.note {
  margin-left: 10rpx;
  font-size: 25rpx;
  color: #041a30;
}

.card-info {
  padding: 35rpx;
  background: #FFFFFF;
  margin: 30rpx 25rpx;
  border-radius: 5px;
}

.min-text {
  font-size: 13px;
  color: #02111f;
  font-weight: initial;
  margin: 10rpx 0;
}

.on-page {
  z-index: 100;
}

.default-page {
  z-index: 10;
}

.bottom-bar {
  background: #FFFFFF;
  align-items: center;
  padding: 20rpx;
  display: flex;
  box-shadow: 0 -5rpx 5px 10rpx rgba(200, 210, 233, 0.5);
  position: fixed;
  bottom: 0;
  width: 100%;

  .to-buy {
    flex: 1;
    height: 80rpx;
    border-radius: 10rpx;
    color: #fff;
    background: #004bdc;
    font-size: 28rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
  }

  .mingxi {
    color: #2979ff;
    padding: 20rpx;
    font-size: 26upx;
    margin-right: 20upx;
    display: flex;
    flex-direction: column;
  }


  .price {
    color: #004bdc;
    width: 450rpx;
    display: flex;
    flex-direction: column;
  }
}

.body-foot {
  display: flex;
  justify-content: center;
  padding: 150rpx 0;
  text-align: center;
  align-items: center;
  margin: 40rpx auto 500rpx;

  > view {
    color: #7a7a7a;
    font-size: 14px;
    min-width: 500rpx;
  }
}

.service-explain {
  font-size: 12px;
  color: #a2adbb;
  margin: 40rpx;

  .service-title {
    color: #5471a5;
  }

  > view {
    margin: 20rpx 0;
  }

  .popup-link {
    color: #0671f7;
  }
}

.line {
  border-bottom: 1px solid #e0e0e0;
  height: 1px;
  margin: 10rpx
}

.icon {
  margin-right: 10rpx
}

.popup-details {
  height: 250px;
  position: relative;
  border-radius: 20rpx 20rpx 0 0;
  background-color: #fff;

  .popup-title {
    text-align: center;
    border-radius: 20rpx 20rpx 0 0;
  }

  .content {
    padding: 20rpx;

    .cost {
      display: flex;
      justify-content: space-between;
    }

    .attention {
      margin: 20rpx auto;
      padding: 20rpx;
      border-radius: 20rpx;
      background: #f0f2f8;
      font-size: 12px;
      color: #c0c0c0;
    }
  }
}

.uni-date-editor {
  position: absolute;
  opacity: 0;
  left: 0;
  right: 20rpx;
}
</style>